$slider-border: 1px solid #dadfe2 !default;
$slider-background-color: $white !default;

$slider-horizontal-height: 0.8125rem !default;
$slider-horizontal-width: 10rem !default;

$slider-range-background-color: rgba(#479cc8, 0.3) !default;
$slider-range-border: 1px solid #459cca !default;

$slider-handle-background-color: $default-link !default;
$slider-handle-width: 1rem !default;
$slider-handle-height: 1.75rem !default;
$slider-handle-border-radius: 2px !default;
$slider-handle-hover-background-color: #59a6cd !default;
$slider-handle-hover-shadow: inset 0 -3px 0 0 rgba(#fff, 0.2) !default;
$slider-handle-color: $white !default;

$slider-disabled-range-background-color: rgba(211, 217, 219, 0.5) !default;
$slider-disabled-range-border: solid 1px rgba(211, 217, 219, 0.3) !default;
$slider-disabled-background-color: rgba(211, 217, 219, 0.1) !default;
$slider-disabled-border: solid 1px #dadfe2 !default;
$slider-disabled-handle-background-color: #d3d9db !default;
$slider-border-radius: $input-border-radius !default;

.rz-slider {
  position: relative;
  display: inline-block;
  border: $slider-border;
  border-radius: $slider-border-radius;
  background-color: $slider-background-color;

  &.rz-state-disabled {
    background-color: $slider-disabled-background-color;
    border: $slider-disabled-border;

    .rz-slider-range {
      background-color: $slider-disabled-range-background-color;
      border: $slider-disabled-range-border;
    }

    .rz-slider-handle {
      background-color: $slider-disabled-handle-background-color;
    }
  }
}

.rz-slider-horizontal {
  height: $slider-horizontal-height;
  width: $slider-horizontal-width;
}

.rz-slider-range {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;

  border-top-left-radius: $input-border-radius;
  border-bottom-left-radius: $input-border-radius;
  background-color: $slider-range-background-color;
  border: $slider-range-border;
}

.rz-slider-handle {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  margin-left: -$slider-handle-width/2;
  background-color: $slider-handle-background-color;
  border-radius: $slider-handle-border-radius;
  width: $slider-handle-width;
  height: $slider-handle-height;

  &:before {
    display: inline-block;
    color: $slider-handle-color;
    transform: rotate(90deg);
    vertical-align: middle;
    font-family: 'Material Icons';
    content: 'drag_handle';
  }
}

.rz-slider:not(.rz-state-disabled) {
  .rz-slider-handle {
    &:hover {
      background-color: $slider-handle-hover-background-color;
      box-shadow: $slider-handle-hover-shadow;
    }
  }
}
